<template>
  <div id="tel_main">
    <h3>查询条件</h3>
    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-input v-model.trim="inputPoolId" placeholder="请输入报修ID" size="normal" clearable></el-input>
      </el-col>
      <el-col :span="7" :offset="0">
        <el-input v-model.trim="inputRepairName" placeholder="请输入报修人" size="normal" clearable></el-input>
      </el-col>
      <el-col :span="7" :offset="0">
        <el-input v-model="inputTel" placeholder="请输入报修电话" size="normal" clearable type="number"></el-input>
      </el-col>
      <el-col :span="4" :offset="0">

        <el-button type="primary" size="small" @click="reloadTable">查询</el-button>
        <el-button type="primary" size="small" @click="reset">重置</el-button>
      </el-col>
    </el-row>

    <hr>
    <div id="BFC">
      <h3 id="label_inline">报修信息</h3>
      <el-button type="primary" id="abs_right" size="small" @click="showInputForm()">登记</el-button>
    </div>
    <br />

    <el-table :data="tableData" border stripe width="100%">
      <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scpoe="scope">
            <el-button :disabled="scope.row.state!=='未派单'" type="primary" size="mini" @click="showUpdateForm(scope.row.repairId)">修改</el-button>
            <el-button type="danger" :disabled="scope.row.state!=='未派单'" size="mini" @click="doDelete(scope.row.repairId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <paging ref="pager" :doQuery="doQuery"></paging>
  </div>
</template>

<script>
import paging from '../../components/paging.vue'
import service from '../../utils/request'
export default {
  components: {
    paging
  },
  data() {
    return {
      inputPoolId: "",
      inputRepairName: "",
      inputTel: "",
      tableData: [],
      columns: [
        { id: "repairId", label: "报修ID" },
        { id: "repairName", label: "报修人" },
        { id: "tel", label: "联系方式" },
        { id: "repairType", label: "报修类型" },
        { id: "appointmentTime", label: "预约时间" },
        { id: "communityName", label: "位置" },
        { id: "state", label: "状态" }
      ]
    }
  },
  mounted() {
    this.reloadTable()
  },
  methods: {
    doQuery(pageNum, pageSize) {
      let params = { pageNum, pageSize }
      if (this.inputPoolId.length > 0) {
        params.repairId = this.inputPoolId
      }
      if (this.inputRepairName.length > 0) {
        params.repairName = this.inputRepairName
      }
      if (this.inputTel.length > 0) {
        params.tel = this.inputTel
      }
      service({
        url: "/registration",
        method: "get",
        params
      }).then(res => {
        this.tableData = res.data
        this.$refs.pager.setMaxRows(res.maxRows)
      })
    },
    reloadTable() {
      this.$refs.pager.reload()
    },
    showUpdateForm(repairId) {

    },
    reset() {

    },
    doDelete(repairId) {

    },
    showInputForm() {

    }
  }
}
</script>
<style scope>
#tel_main {
  padding: 20px;
}

#abs_right {
  position: absolute;
  right: 20px;
}

#label_inline {
  display: inline;
}

#BFC {
  overflow: hidden;
}
</style>